<template>
  <view
    class="mebgtop"
    :style="{ paddingTop: safeAreaInsets!.top + 65 + 'px' }"
  >
    <view class="flexCenterSpaceBetween">
      <view
        class="flexCenter"
        @tap="jump('/pages/me/meinfo')"
        v-if="state.userinfo.status != null"
      >
        <up-avatar
          v-if="state.userinfo.avatarUrl"
          :src="`${baseimgURL}${state.userinfo.avatarUrl}`"
          size="122"
        ></up-avatar>
        <up-avatar
          v-else
          :src="`${state.baseimgurl}/nohead.png`"
          size="122"
        ></up-avatar>
        <view>
          <view class="bigtitle">{{ state.userinfo.nickName }}</view>
          <view class="bigtitlemobile">{{ state.userinfo.mobile }}</view>
        </view>
      </view>

      <view class="flexCenter" @tap="gologin" v-else>
        <up-avatar
          :src="`${state.baseimgurl}/nohead.png`"
          size="122"
        ></up-avatar>
        <view class="bigtitle">未登录/注册</view>
      </view>
      <view class="flex">
        <image
          @tap="mahand"
          class="scanma"
          mode="widthFix"
          src="@/static/img/erweima.png"
        ></image>
        <u-icon
          @tap="jump('/pages/me/meinfo')"
          color="#999999"
          size="24"
          name="arrow-right"
        ></u-icon>
      </view>
    </view>
    <image
      class="huibanner"
      mode="widthFix"
      src="@/static/img/huibanner.png"
    ></image>
    <view class="mecard flexCenterCenter">
      <view
        class="mebox flexCenterCenter"
        v-for="item in orderTypes"
        @tap="jump(item.url, item.type)"
        :key="item.type"
      >
        <image
          class="meicon"
          mode="widthFix"
          :src="getAssetsImages(`meicon${item.type}`, 'png')"
        ></image>
        <view>{{ item.text }}</view>
      </view>
    </view>
    <view class="mecard flexCenterCenter">
      <view
        class="flex_1 mecardbox"
        v-for="item in orderlist"
        :key="item.type"
        @tap="jumporderlist(item.url)"
      >
        <view> {{ item.num }} </view>
        <view> {{ item.text }}</view>
      </view>
    </view>
    <view class="mecard">
      <view
        v-for="item in setinglist"
        :key="item.type"
        class="linebox flexCenterSpaceBetween flexYCenter"
        @tap="jump(item.url, item.type)"
      >
        <view class="flex flexYCenter">
          <image
            class="meseticon"
            mode="widthFix"
            :src="getAssetsImages(`meseticon${item.icontype}`, 'png')"
          ></image>
          <view>{{ item.text }}</view>
        </view>
        <u-icon color="#999999" size="24" name="arrow-right"></u-icon>
      </view>
    </view>
    <view class="mecard">
      <view
        class="linebox flexCenterSpaceBetween"
        @tap="jumpset('/pages/me/settingpage')"
      >
        <view class="flex flexYCenter">
          <image
            class="meseticon"
            mode="widthFix"
            src="@/static/img/meseticon5.png"
          ></image>
          <view>设置</view>
        </view>
        <u-icon color="#999999" size="24" name="arrow-right"></u-icon>
      </view>
    </view>
    <view style="height: 200rpx;"></view>
    <renzhengpopup ref="maRef" @gorenpage="gorenpage"></renzhengpopup>
    <gorenzheng ref="renRef" @gorenpage="gorenpage"></gorenzheng>
    <gologinpop ref="gologinref"></gologinpop>
  </view>
</template>

<script lang="ts" setup>
import { baseimgURL } from "@/config";
import { ref, reactive, computed, watch, inject } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import renzhengpopup from "@/components/renzhengpopup";
import gorenzheng from "@/components/gorenzheng";
import { membersinfo, getRecycleOrderNum } from "@/utils/api";
import common from "@/utils/common";
import gologinpop from "@/components/gologin";

const baseimgurl = inject("$baseimgurl");
const state = reactive({
  userinfo: {
    nickName: "",
  },
  baseimgurl: baseimgurl,
});
const numdata = ref(null);
const maRef = ref(null);
const renRef = ref(null);
const gologinref = ref(null);
const showpop = () => {
  gologinref.value.maopen();
};
const mahand = () => {
  if (!common.Islogin()) {
    showpop();
  } else {
    maRef.value.maopen();
  }
};

onShow(async () => {
  state.userinfo = uni.getStorageSync("userinfo")
    ? JSON.parse(uni.getStorageSync("userinfo"))
    : {};
  if (state.userinfo.id) {
    const { data } = await getRecycleOrderNum();
    numdata.value = data[0];
    orderlist[0].num = numdata.value.orderNum;
    orderlist[1].num = numdata.value.orderCompleteNum;
    orderlist[2].num = numdata.value.appraiseNum;
  }
});
const getAssetsImages = computed(() => (name, type = "png") => {
  /**
   * 获取本地图
   * @param name // 文件名 如 home-bg
   * @param type // 文件类型 如 png jpg
   * @returns {*|string}
   */
  const path = `../../static/img/${name}.${type}`;
  const modules = import.meta.globEager("../../static/img/*");
  return modules[path].default;
});
uni.$on("changeinfo", (res) => {
  state.userinfo = JSON.parse(res);
});

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync();
const orderTypes = [
  { type: "1", text: "授权登录", url: "/pages/login/index" },
  { type: "2", text: "实名认证", url: "/pages/me/authentication" },
  { type: "3", text: "收款账户", url: "/pages/me/payList" },
  { type: "4", text: "出售闲置", url: "/pages/sale/selling" },
];

const orderlist = [
  { type: "11", text: "订单", num: 0, url: "/pages/orderPage/orderPage" },
  { type: "12", text: "成交量", num: 0 },
  { type: "13", text: "鉴定数", num: 0, url: "/pages/jianding/list" },
  { type: "14", text: "积分", num: 0 },
];
const setinglist = [
  // {type:'5', icontype: "6", text: "锁库"},
  { type: "6", icontype: "1", text: "地址管理", url: "/pages/me/address" },
  // { type: "7", icontype: "2", text: "兑奖核销" },
  { type: "8", icontype: "3", text: "联系客服" },
  { type: "9", icontype: "4", text: "回收协议", url: "/pages/me/mine" },
];
// 去认证
const gorenpage = () => {
  uni.navigateTo({
    url: "/pages/me/authentication",
  });
};
const gologin = () => {
  uni.navigateTo({ url: "/pages/login/index" });
};
const jump = (url, type) => {
  console.log(url, type);
  let userinfo = uni.getStorageSync("userinfo")
    ? JSON.parse(uni.getStorageSync("userinfo"))
    : {};
  if (type == "9") {
   let allAgreement = JSON.parse(uni.getStorageSync('allAgreement'))
   uni.navigateTo({ url: url+'?id='+ allAgreement[2].value.id+'&title='+'奢收多卖家回收协议'});
   return
  }
  // 收款账户
  if (type == "3") {
    if (!common.Islogin()) {
    showpop();
    return
  }
  else {
    membersinfo().then((meinfo) => {
      if (meinfo) {
        uni.setStorageSync("userinfo", JSON.stringify(meinfo.data));
        state.userinfo = meinfo.data;
        if (state.userinfo.certificateStatus == 0) {
          renRef.value.maopen();
          return;
        } else {
          uni.navigateTo({
            url: url,
          });
        }
      }
    });

  }
return
  }

  // 实名认证（需要实名认证）
  if (type == "2") {
    if(common.Islogin()){
      membersinfo().then((meinfo) => {
      if (meinfo) {
        uni.setStorageSync("userinfo", JSON.stringify(meinfo.data));
        state.userinfo = meinfo.data;
        let status;
        if (!state.userinfo.memberCertificate) {
          uni.navigateTo({
            url: "/pages/me/authentication",
          });
        } else {
          status = state.userinfo.memberCertificate.auditStatus;
          if (status) {
            uni.navigateTo({
              url: `/pages/me/authenticationresult?status=${status}`,
            });
          } else {
            if (status == 0) {
              uni.navigateTo({
                url: `/pages/me/authenticationresult?status=${status}`,
              });
            } else {
              uni.navigateTo({
                url: "/pages/me/authentication",
              });
            }
          }
        }
      }
    });
    }else{
      showpop();
    }

  }
  else {
    uni.navigateTo({ url: url });
  }
}
// 设置（需要实名认证）
const jumpset=(url)=>{
  if (common.Islogin()) {
   membersinfo().then((meinfo) => {
      if (meinfo) {
        uni.setStorageSync("userinfo", JSON.stringify(meinfo.data));
        state.userinfo = meinfo.data;
        if (!state.userinfo.memberCertificate) {
          renRef.value.maopen();
          return false;
        } else {
          uni.navigateTo({
            url: url,
          });
        }
      } else {
        showpop();
      }
    });
  }else{
    showpop();
  }
}

// （新）
// 判断是否登录没登录弹框
const getuserdata=(url)=>{
  if (common.Islogin()) {
    uni.navigateTo({ url: url });
  }else{
    showpop();
  }
}
// 订单数 鉴定数
const jumporderlist=(url)=>{
  getuserdata(url)

}
</script>
<style lang="scss" scoped>
.mebgtop {
  padding: 20rpx;
  padding-top: 132rpx;
  box-sizing: border-box;
  height: 488rpx;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 488rpx;
  .bigtitle {
    font-size: 40rpx;
    font-weight: 600;
    color: #000000;
    margin-left: 22rpx;
  }
  .bigtitlemobile {
    font-size: 26rpx;
    font-weight: 600;
    color: #000000;
    margin-left: 22rpx;
  }
  .scanma {
    width: 52rpx;
    height: 52rpx;
    margin-right: 36rpx;
  }
  .huibanner {
    width: 100%;
    height: 146rpx;
  }
  .mecard {
    background: #ffffff;
    margin-top: 14rpx;
    flex-wrap: wrap;
    border-radius: 20rpx;
    font-size: 29rpx;
    /* // margin-left: 14rpx; */
    .mebox {
      min-width: 353rpx;
      height: 109rpx;
      flex: 1;
      display: flex;
      align-items: center;
      view {
        font-size: 29rpx;
        margin-left: 14rpx;
      }
    }
  }
  .meicon {
    width: 42rpx;
    height: 42rpx;
  }
  .mecardbox {
    padding: 20rpx 0;
    text-align: center;
    :nth-child(1) {
      color: #333;
      font-size: 28rpx;
    }
    :nth-child(2) {
      color: #666;
      font-size: 22rpx;
    }
  }
  .meseticon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 20rpx;
  }
  .linebox {
    padding: 24rpx 24rpx;
    border-bottom: 2rpx solid #f4f4f4;
    align-items: center;
  }
}
</style>
